/* hbanner-1---start----------------------  */
.hbanner {
	display: flex;
}
.hbanner .banner {
	/* width: 50%; */
	flex: 1;
	background-color: #333333;
	padding: 0;
	height: 580px;
}
.hbanner h1{
	color: #111;
	font-size: 37px;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: 0em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 52px;
}

.hbanner h2{
	color: #111;
	font-size: 21px;
	line-height: 1.2381;
	font-weight: 400;
	letter-spacing: .016em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 4px;
}

.hbanner .banner .link a{
	color: #0070c9;
	font-size: 17px;
	line-height: 1.23543;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 4px;
}

.hbanner .banner:nth-child(1) {
	margin: 10px 5px 10px 10px;
	background-image: url(../img/hbanner1.jpg);
	background-size: auto 120% ;
	background-position: center;
	background-repeat: no-repeat;
}

.hbanner .banner:nth-child(2) {
	margin: 10px 10px 10px 5px;
	background-image: url(../img/hbanner2.jpg);
	background-size:  auto 120% ;
	background-position: center;
	background-repeat: no-repeat;
}
/* hbanner-1---end---------------------- */
/* hbanner-2---start----------------------  */
.hbanner2 {
	display: flex;
}
.hbanner2 .banner {
	/* width: 50%; */
	flex: 1;
	background-color: #333333;
	padding: 0;
	height: 580px;
}
.hbanner2 h1{
	color: #fff;
	font-size: 37px;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: 0em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 52px;
}


.hbanner2 .banner .link a{
	color: #0070c9;
	font-size: 17px;
	line-height: 1.23543;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 8px;
}

.hbanner2 .banner:nth-child(1) {
	margin: 10px 5px 10px 10px;
	background-image: url(../img/hbanner3.jpg);
	background-size: auto 120% ;
	background-position: center;
	background-repeat: no-repeat;
}

.hbanner2 .banner:nth-child(2) {
	margin: 10px 10px 10px 5px;
	background-image: url(../img/hbanner4.jpg);
	background-size:  auto 120% ;
	background-position: center;
	background-repeat: no-repeat;
}
/* hbanner-2---end----------------------  */

/* hbanner-3---start----------------------  */
.hbanner3 {
	display: flex;
	overflow: hidden;
}
.hbanner3 .banner {
	/* width: 50%; */
	flex: 1;
	background-color: #333333;
	padding: 0;
	height: 580px;
}
.hbanner3 .banner:nth-child(1) h1{
	color: #ffffff;
	/* font-size: 28px;
	line-height: 1.225; */
	width: 95%;
	max-width: 400px;
	/* font-weight: 600;
	letter-spacing: 0em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; */
	margin-top: 350px;
	background-image: url(../img/apple_music_logo.png);
	background-position: center;
	background-repeat: no-repeat;
	height: 25px;
	background-size: 103px 25px;
}

.hbanner3 .banner:nth-child(2) h1 {
	color: #1d1d1f;
	font-size: 28px;
	line-height: 1.225;
	font-weight: 600;
	letter-spacing: 0em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 52px;
}

.hbanner3 .banner:nth-child(1) h2{
	color: #fff;
	font-size: 21px;
	line-height: 1.2381;
	font-weight: 400;
	letter-spacing: .016em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 4px;
}

.hbanner3 .banner:nth-child(2) h2{
	color: #1d1d1f;
	font-size: 21px;
	line-height: 1.2381;
	font-weight: 400;
	letter-spacing: .016em;
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 4px;
}


.hbanner3 h2{
	color: #1d1d1f;
	font-size: 21px;
	line-height: 1.2381;
	font-weight: 400;
	letter-spacing: .016em;
	font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 4px;
}

.hbanner3 .banner .link a{
	color: #0070c9;
	font-size: 17px;
	line-height: 1.23543;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	margin-top: 4px;
}

.hbanner3 .banner:nth-child(1) {
	margin: 10px 5px 10px 10px;
	background-image: url(../img/hbanner5.jpg);
	background-size: auto 120% ;
	background-position: center;
	background-repeat: no-repeat;
}

.hbanner3 .banner:nth-child(2) {
	margin: 10px 10px 10px 5px;
	background-image: url(../img/hbanner6.jpg);
	background-size:  auto 120% ;
	background-position: center;
	background-repeat: no-repeat;
}

/* hbanner-3---end----------------------  */

.visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

/* 设定不同屏幕下banner,hbanner样式 */
/* boxsizing盒子模型 */
@media only screen and (max-width: 1100px){
	.banner {
		height: 595px;
	}	
}

@media only screen and (max-width: 740px){
	.banner {
		height: 445px;
		background-size: 80%;
	}
	.hbanner {
		/* display: block; */
		flex-direction: column;
		height: 1020px;
	}
	.hbanner .banner:nth-child(1),.hbanner .banner:nth-child(2) {
		width: calc(100% - 20px);
		margin: 10px;
	}	
	
	.hbanner2 {
		/* display: block; */
		flex-direction: column;
		height: 1020px;
	}
	.hbanner2 .banner:nth-child(1),.hbanner2 .banner:nth-child(2) {
		width: calc(100% - 20px);
		margin: 10px;
	}
	
	.hbanner3 {
		/* display: block; */
		flex-direction: column;
		height: 1020px;
	}
	.hbanner3 .banner:nth-child(1),.hbanner2 .banner:nth-child(2) {
		width: calc(100% - 20px);
		margin: 10px;
	}
}